<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>博客修改</title>
</head>
<body>
<!--后台一级导航栏-->
<div th:replace="~{commons/admin_com::menu}"></div>

<!--中间部分-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <!--撰写博客信息-->
        <form id="blog-form" th:action="@{/admin/blogs/} + ${blog.id}" class="ui form" method="post">
            <input type="hidden" name="_method" value="put"/>
            <input type="hidden" name="id" th:value="${blog.getId()}"/>
            <!--是否发布的隐藏域-->
            <input type="hidden" th:name="published" th:value="${blog.isPublished()}"/>
            <div class="ui segment">
                <!--标题 required：必填-->
                <div class="required field">
                    <div class="ui right labeled input action">
                        <div class="ui selection blue basic dropdown label compact">
                            <!--提交 flag-->
                            <input type="hidden" value="笔记" name="flag" th:value="${blog.flag}"/>
                            <i class="dropdown icon"></i>
                            <div class="text">原创</div>
                            <div class="menu">
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="笔记">笔记</div>
                            </div>
                        </div>
                        <input type="text" name="title" placeholder="标题" th:value="${blog.title}"/>
                    </div>
                </div>

                <!--博客描述信息-->
                <div class="required field">
                    <textarea name="description" placeholder="博客描述..." maxlength="200"
                              th:text="${blog.description}"></textarea>
                </div>

                <!--style="z-index: 1 !important;"：将编辑器的叠放层次置为 最上面-->
                <!--博客内容-->
                <div class="required field">
                    <div id="md-content" style="z-index: 1 !important;">
                    <textarea name="content" placeholder="请输入内容" style="display: none;" th:text="${blog.content}">[TOC]
- hello,world</textarea>
                    </div>
                </div>

                <!--博客分类、标签-->
                <div class="two fields">
                    <!--分类-->
                    <div class="required field">
                        <div class="ui left labeled input action">
                            <label class="ui compact green basic label">分类</label>
                            <!--下拉选项-->
                            <div class="ui fluid selection dropdown ">
                                <!--UpdateBlog 中的 typeId-->
                                <input type="hidden" name="typeId" th:value="${blog.typeId}"/>
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div class="item" th:each="type:${types}" th:text="${type.name}"
                                         th:data-value="${type.id}">Java
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--标签-->
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact blue basic label">标签</label>
                            <!--
                                selection dropdown：下拉选项
                                search：根据 data-value 的值来进行搜索
                                multiple：可选择多个
                                compact：将长度缩短一些
                                fluid：将长度伸长一些
                            -->
                            <div class="ui selection dropdown fluid multiple search">
                                <!--提交的 标签 隐藏域 name="tagIds"-->
                                <input type="hidden" name="tagIds" th:value="${blog.tagIds}">
                                <i class="dropdown icon"></i>
                                <div class="default text">标签</div>
                                <div class="menu">
                                    <div class="item" th:each="tag:${tags}" th:text="${tag.name}"
                                         th:data-value="${tag.id}">Java基础
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <!--博客首图-->
                <div class="required field">
                    <div class="ui left labeled input">
                        <label class="ui blue basic label">首图</label>
                        <input type="text" name="firstPicture" placeholder="首图引用地址" th:value="${blog.firstPicture}">
                    </div>
                </div>

                <!--推荐、转载、赞赏、评论-->
                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="recommend" id="recommend" class="hidden"
                                   th:checked="${blog.isRecommend()}"/>
                            <label for="recommend">推荐</label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="shareStatement" id="shareStatement" class="hidden"
                                   th:checked="${blog.isShareStatement()}"/>
                            <label for="shareStatement">转载</label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="appreciation" id="appreciation" class="hidden"
                                   th:checked="${blog.isAppreciation()}"/>
                            <label for="appreciation">赞赏</label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="commentabled" id="commentabled" class="hidden"
                                   th:checked="${blog.isCommentabled()}"/>
                            <label for="commentabled">评论</label>
                        </div>
                    </div>
                </div>

                <!--默认会提示出错信息-->
                <div class="ui error message"></div>

                <!--返回、保存、发布按钮-->
                <div class="ui container right aligned m-margin-tb-small">
                    <!--不加button，默认是submit-->
                    <button type="button" class="ui red basic button" onclick="window.history.go(-1);">返回</button>
                    <button type="button" id="save-btn" class="ui basic black button">存为草稿</button>
                    <button type="button" id="publish-btn" class="ui blue basic button">发布</button>
                </div>
            </div>
        </form>
    </div>
</div>

<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>

<!--引用的 js-->
<th:block th:replace="~{commons/admin_com::script}">
</th:block>


<script>
    // 生成博客的 ID，后台使用主键回填
    /*    function createRandomId() {
            return (new Date()).getTime();
        }*/
    // 保存提交form表单
    $("#save-btn").click(() => {
        $('[name="published"]').val(false);
        $('#blog-form').submit();
    });

    // 发布提交form表单
    $("#publish-btn").click(() => {
        $('[name="published"]').val(true);
        // $('#randomId').val(Number(createRandomId()));
        $('#blog-form').submit();
    });

    var testEditor;

    $(function () {
        testEditor = editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "/lib/editormd/lib/"
        });

    });

    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });


    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });

    // 实现菜单下拉
    $('.ui.dropdown')
        .dropdown();

    // 提交博客表单校验
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '内容：请输入博客内容'
                }]
            },
            typeId: {
                identifier: 'typeId',
                rules: [{
                    type: 'empty',
                    prompt: '分类：请输入博客分类'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '首图：请输入博客首图'
                }]
            }
        }
    });


</script>


</body>
</html>